<template>
    <div>
        <el-card shadow="always">
            <div slot="header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-form :model="newform" :rules="rules" ref="formRef" label-width="100px">
                <el-form-item label="用户ID:" prop="nameID">
                    <el-input v-model="newform.nameID" placeholder="请输入用户ID"></el-input>
                </el-form-item>
                <el-form-item label="用户名:" prop="name">
                    <el-input v-model="newform.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名:" prop="zname">
                    <el-input v-model="newform.zname" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item prop="cover" label="头像:">
                    <div>
                        <el-upload  action="" :show-file-list="false"
                            :http-request="uploadFile">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary">点击上传</el-button>
                </el-form-item>
                <el-form-item>
                    <el-radio v-model="newform.radio" label="1">男</el-radio>
                    <el-radio v-model="newform.radio" label="2">女</el-radio>
                </el-form-item>
                <el-form-item prop="value1">
                    <div class="block">
                        <span class="demonstration">生日:</span>
                        <el-date-picker v-model="newform.value1" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="个人介绍" prop="fh">
                    <div class="jieshao">
                        <el-input v-model="newform.fh" type=" textarea" placeholder="请输入个人介绍"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="tijiao" type="primary">保存</el-button>
                </el-form-item>
                {{ newform }}
            </el-form>
        </el-card>
    </div>
</template>
<script>
export default {
  name: 'NewhomeVue',
  data () {
    // 自定义校验函数
    const checkCoverFn = (_, cover, callback) => {
      if (cover.images.length < 1) {
        return callback(new Error('请上传一张封面'))
      } else if (cover.images.length > 1) {
        return callback(new Error('只能上传一张封面'))
      }
      // 通过校验
      callback()
    }
    return {
      newform: {
        radio: '1', // 男女选项
        nameID: '',
        name: '',
        zname: '',
        cover: [],
        fh: '',
        value1: ''
      },
      imageUrl: '', // 初始化 imageUrl

      rules: {
        nameID: [
          { required: true, message: '请输入用户ID', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在2-5个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在2-5个字符', trigger: 'blur' }
        ],
        zname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在2-5个字符', trigger: 'blur' }
        ],
        // 图片校验
        value1: [
          { required: true, message: '请选择日期', trigger: 'change' }

        ],
        fh: [
          { required: true, message: '请输入自我介绍', trigger: 'blur' },
          { min: 5, max: 100, message: '长度在5-100个字符', trigger: 'blur' }
        ],
        cover: [
          { validator: checkCoverFn, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    tijiao () {
      // 整个表单校验
      this.$refs.formRef.validate(async (res) => {
        if (res) {
          await this.$http.post('/v1_0/mp/articles', this.newForm)
          this.$router.push('/article')
        }
      })
    },
    // 覆盖默认的上传行为，可以自定义上传的实现
    async uploadFile (obj) {
      // console.log('上传', file)
      // 创建FormData对象 用于上传图片,注意
      const fd = new FormData()
      fd.append('image', obj.file)
      // 发送请求 上传文件
      const res = await this.$http.post('/v1_0/user/photo', fd)
      // console.log(res)
      // 图片地址添加到数组中
      this.articeForm.cover.images.push(res.data.data.url)
      // 主动触发cover校验
      this.$refs.formRef.validateField('cover')
      // 上传成功后 返回图片地址,图片地址会自动记录在file.response,可用于删除,预览等业务
      return res.data.data.url
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
